<script setup>
import { ref, computed, reactive } from 'vue'
import { useCommonStore, useUserStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { uploadAPI } from '@/api/common.js'
import { message, message as tipMessage } from '@/components/ZyMessage/index.js'

const commonStore = useCommonStore()
const userStore = useUserStore()
const { currentWall } = storeToRefs(commonStore)
const { user } = storeToRefs(userStore)

// 当前的卡片颜色
const colorIndex = ref(0)
const onChangeColor = (index) => {
  colorIndex.value = index
}
// 当前选中的标签
const labelIndex = ref(0)
const onChangeLabel = (index) => {
  labelIndex.value = index
}
// 是否是留言墙
const isLeavewordWall = computed(() => currentWall.value.title === '留言墙')

// 留言参数
const params = reactive({
  content: '',
  name: '',
  img_url: ''
})
const imgFile = ref()
const getParams = async () => {
  // 上传图片
  if (!isLeavewordWall.value) {
    if (!imgFile.value) {
      tipMessage('图片不能为空!', 'warning')
      return Promise.reject(new Error('图片不能为空'))
    }
    const formdata = new FormData()
    formdata.append('file', imgFile.value)
    params.img_url = await uploadAPI(formdata)
  }
  return {
    content: params.content,
    name: params.name || user.value.nickname || '匿名',
    img_url: params.img_url,
    wall_id: currentWall.value.id,
    label_id: currentWall.value.labels[labelIndex.value].id,
    color_id: currentWall.value.colors[colorIndex.value].id
  }
}

// 重置参数
const resetParams = () => {
  params.content = ''
  params.name = ''
  params.img_url = ''
  imgFile.value = null
  onChangeColor(0)
  onChangeLabel(0)
}

// 选择图片
const onChangeImg = (el) => {
  // 1.获取文件
  const file = el.target.files[0]
  if (!file) return
  // 2.限制文件大小
  const maxSize = 1024 * 1024 * 5 // 5MB
  if (file.size > maxSize) return message('图片不能大于5MB', 'warning')

  imgFile.value = file
  // 3..创建FileReader
  const reader = new FileReader()
  reader.onload = (e) => {
    params.img_url = e.target.result
  }
  reader.readAsDataURL(file)
}

defineExpose({ getParams, resetParams })
</script>

<template>
  <div class="add-leaveword">
    <!-- 1.背景颜色选择 -->
    <div class="colors" v-if="isLeavewordWall">
      <div
        class="item"
        :class="{ active: colorIndex === index }"
        v-for="(item, index) in currentWall.colors"
        :key="item.id"
        :style="{ backgroundColor: item.color }"
        @click="onChangeColor(index)"
      ></div>
    </div>
    <!-- 2.添加照片 -->
    <div class="add-img" v-else>
      <input
        class="input"
        :class="{ change: params.img_url }"
        type="file"
        name="file"
        multiple
        accept="image/*"
        @change="onChangeImg"
      />
      <div class="add-bt" v-if="!params.img_url">
        <svg-icon class="add-icon" icon-name="tianjia" />
      </div>
      <div class="change-bt" v-else>
        <svg-icon class="change-icon" icon-name="qiehuan" />
      </div>
      <div class="preview">
        <img :src="params.img_url" />
      </div>
    </div>
    <!-- 3.添加留言 -->
    <div
      class="leaveword-content"
      :style="{ backgroundColor: currentWall.colors?.[colorIndex]?.bg_color }"
    >
      <textarea class="content" v-model="params.content" placeholder="留言..."></textarea>
      <input
        class="name"
        v-model="params.name"
        type="text"
        :placeholder="user.nickname || '匿名'"
      />
    </div>
    <!-- 4.选择标签 -->
    <div class="label">
      <p class="title">选择标签</p>
      <div class="list">
        <div
          class="item"
          :class="{ active: labelIndex === index }"
          v-for="(item, index) in currentWall.labels"
          :key="item.id"
          @click="onChangeLabel(index)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- 5.免责声明 -->
    <div class="statement">
      <div class="title">免责声明</div>
      <p>
        知语拾光是本人独自开发的，为便于与用户交流的留言平台。请不要利用此平台服务制作、上传、下载、复制、发布、传播或者转载如下内容：
      </p>
      <p>1、反对宪法所确定的基本原则的；</p>
      <p>2、危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家 统一的；</p>
      <p>3、损害国家荣誉和利益的；</p>
      <p>4、煽动民族仇恨、民族歧视，破坏民族团结的；</p>
      <p>5、破坏国家宗教政策，宣扬邪教和封建迷信的；</p>
      <p>6、散布谣言，扰乱社会秩序，破坏社会稳定的；</p>
      <p>7、散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</p>
      <p>8、侮辱或者诽谤他人，侵害他人合法权益的；</p>
      <p>9、含有法律、行政法规禁止的其他内容的信息。</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.add-leaveword {
  padding: 0 20px;
}
.colors {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
  cursor: pointer;
  .item {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }
  .active {
    border: 1px solid var(--primary-color);
  }
}
.add-img {
  margin-bottom: 20px;
  position: relative;
  .input {
    position: absolute;
    z-index: 1;
    height: 64px;
    width: 64px;
    opacity: 0;
    cursor: pointer;
  }
  .change {
    top: 12px;
    left: 12px;
    height: 40px;
    width: 40px;
  }
  .add-bt {
    width: 64px;
    height: 64px;
    border: 1px solid var(--gray-text-2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--gray-text-1);
    cursor: pointer;
    .add-icon {
      font-size: 24px;
    }
  }
  .change-bt {
    position: absolute;
    top: 12px;
    left: 12px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    .change-icon {
      font-size: 18px;
      color: #fff;
    }
  }
  .preview {
    width: 100%;
    height: auto;
    background-color: #f0f0f0;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}
.leaveword-content {
  width: 100%;
  min-height: 240px;
  padding: 12px;
  transition: var(--tr);
  .content {
    width: 100%;
    padding: 8px;
    resize: none;
    border: none;
    background: none;
    min-height: 172px;
    font-family: serif;
    color: var(--primary-text);
    &::placeholder {
      color: var(--gray-text-2);
    }
    &::-webkit-scrollbar {
      // 滚动条整体样式
      width: 4px;
      height: 4px;
    }
    &::-webkit-scrollbar-thumb {
      // 滚动条里面的小方块
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.2);
    }
    &::-webkit-scrollbar-track {
      // 滚动条里面的轨道
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0);
    }
  }
  .name {
    width: 100%;
    height: 36px;
    line-height: 36px;
    background: none;
    border: 1px solid hsla(0, 0%, 100%, 0.6);
    padding: 8px;
    font-family: serif;
    font-weight: 600;
    text-align: right;
    color: var(--primary-text);
    &::placeholder {
      color: var(--gray-text-2);
    }
  }
}
.label {
  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      padding: 2px 10px;
      border-radius: 20px;
      margin-bottom: 10px;
      cursor: pointer;
      color: var(--gray-text-1);
      transition: var(--tr);
    }
    .active {
      background-color: var(--label-bg);
      font-weight: 600;
      color: var(--primary-text);
    }
  }
}
.statement {
  p {
    font-size: 12px;
    color: var(--gray-text-2);
  }
}
.title {
  color: var(--primary-text);
  font-weight: 600;
  margin-top: 30px;
  margin-bottom: 12px;
}
</style>
